<template>
	<div>
		<el-menu   default-active="1-4-1" class="el-menu-vertical-demo left-aside" @open="handleOpen" @close="handleClose"
			:collapse="isCollapse">
			
			<el-submenu :index="index" v-for="(component, index) in navsData" :key="index"
				v-show="type == component.type || !showHederMenu">
				<template slot="title">
					<i class="el-icon-location"></i>
					<span slot="title">{{component.name}}</span>
				</template>
				<el-menu-item-group v-for="(nav, i) in component.groups" :key="i">
					<span slot="title">{{nav.name}}</span>
					<el-menu-item index="1-1" v-for="(subnav, j) in nav.list" :key="j">
						<router-link :to="component.path + subnav.path" exact v-text="subnav.title"></router-link>
					</el-menu-item>
				</el-menu-item-group>
			</el-submenu>

		</el-menu>


	</div>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			navsData: Object,
			type: String,
			isCollapse:{
				type:Boolean,
				default: false
			},
			showHederMenu:{
				type:Boolean,
				default: true
			},
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style scoped>
	.side-nav {
		position: fixed;
		width: 220px;
		top: 60px;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 50px;
		line-height: 1.8;
		border-right: 1px #ddd solid;
	}

	.side-nav a {
		display: block;
		color: #666;
	}

	.nav-item h4 {
		font-size: 20px;
		font-weight: bold;
	}

	.subnav-wrap {
		padding-left: 30px;
		margin-bottom: 20px;
	}
	
	.left-aside {
		width: 200px;
		transition: width 0.28s;
	}
</style>
